<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    <title>NeuBizz | Blog Single Post | Bootstrap 4 Template by WebThemez</title>

    <!-- Meta -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="keywords" content="Bootstrap Theme, Freebies, UI Kit, MIT license">
    <meta name="description" content="Bootstrap 4 Template by WebThemez">
    <meta name="author" content="webthemez.com">

    <!-- Favicon -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <!-- Styles -->
    <link rel="stylesheet" type="text/css" th:href="@{/assets/vendors/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/assets/vendors/font-awesome/css/fontawesome-all.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/assets/vendors/slick-carousel/slick.css}">
	<link th:href="@{/assets/vendors/ace-responsive-menu/ace-responsive-menu.css}" rel="stylesheet" type="text/css" />
	<link th:href="@{/assets/vendors/aos/aos.css}" rel="stylesheet">
	<link rel="stylesheet" type="text/css" th:href="@{/assets/css/theme.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/styles.css}">
  </head>
<body>
   <div class="hidden-xs hidden-sm nav-top bg-primary py-2">
        <div class="container">
          <div class="row">
            <div class="col-sm-6">
              <div class="nav-top-contact">
                <!-- Social links -->
                <ul class="list-inline text-center text-md-left mb-0">
                  <li class="list-inline-item mx-2" ><i class="fa fa-phone"></i> +1-1245-678-980</li>
                  <li class="list-inline-item mx-2" ><i class="fa fa-envelope" aria-hidden="true"></i> info@yourdomain.com</li>
                </ul>
              </div>
            </div>
            <div class="col-sm-6 text-right">
                 <ul class="list-inline text-center text-md-right mb-0">
				  <li class="list-inline-item mx-2" data-toggle="tooltip" data-placement="top" title="Facebook">
					<a target="_blank" href="https://www.facebook.com/Maxi">
					  <i class="fab fa-facebook"></i>
					</a>
				  </li>
				  <li class="list-inline-item mx-2" data-toggle="tooltip" data-placement="top" title="Instagram">
					<a target="_blank" href="https://www.instagram.com/Maxi">
					  <i class="fab fa-instagram"></i>
					</a>
				  </li>
				  <li class="list-inline-item mx-2" data-toggle="tooltip" data-placement="top" title="Twitter">
					<a target="_blank" href="https://twitter.com/Maxi">
					  <i class="fab fa-twitter"></i>
					</a>
				  </li>
				  <li class="list-inline-item mx-2" data-toggle="tooltip" data-placement="top" title="Dribbble">
					<a target="_blank" href="https://dribbble.com/Maxi">
					  <i class="fab fa-dribbble"></i>
					</a>
				  </li>
				</ul>
            </div>
          </div>
        </div>
      </div>
    <!-- Header -->
    <header class="main-header">
	<div class="container">
			<div class="logo">
					<a href="index.html">
						 <h2><span>Neu</span>Bizz</h2>
					  </a>
				</div>
			 <!-- Navbar -->
				<nav class="mainNav">
				<!-- Menu Toggle btn-->
				<div class="menu-toggle">
					<h3>Menu</h3>
					<button type="button" id="menu-btn">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<!-- Responsive Menu Structure-->
				<!--Note: declare the Menu style in the data-menu-style="horizontal" (options: horizontal, vertical, accordion) -->
				<ul id="respMenu" class="ace-responsive-menu" data-menu-style="horizontal">
					 <li class="active">
						<a href="index">
							<span class="title">Home</span>
						</a>
					</li>
					 <li>
						<a href="about">
							<span class="title">About Us</span>
						</a>
					</li>
					 <li>
						<a href="services">
							<span class="title">Services</span>
						</a>
					</li>
						<li>
						<a href="javascript:;">
							<span class="title">Pages</span>
							<span class="arrow"></span> </a>
						<!-- Level Two-->
						<ul class="sub-menu" style="display: none;">
							<li>
								<a href="pricing">
									<span class="title">Pricing</span>
								</a>
							</li>
							<li>
								<a href="portfolio">
									<span class="title">Portfolio</span>
								</a>
							</li>
							<li>
								<a href="error">
									<span class="title">404 Page</span>
								</a>
							</li>
						</ul>
					</li>
					<li class="menu-active">
						<a href="javascript:;" class="active">
							<span class="title">Blog</span>
							<span class="arrow"></span> </a>
						<!-- Level Two-->
						<ul class="sub-menu" style="display: none;">
							<li>
								<a href="blog" >Blog</a>
							</li>
							<li>
								<a href="blog-single-post">Blog Single</a>
							</li>
						</ul>
					</li>
					<li class="last ">
						<a href="contact">
							<span class="title">Contact Us</span>
						</a>
					</li>
				</ul>
				</nav>
				</div>
    </header>
	  <section class="wt-section bg-gray text-center inner-page-header">
			<div class="container">
				<div class="row justify-content-md-center align-items-center text-white py-4 py-lg-5">
					<div class="col-md-7">
						<div class="text-center">
							<h1 class="display-sm-4 display-lg-3" th:text="${ArticleVo.title}" >A Single Blog Post Title Goes Here..</h1>
							<p class="sub-text" th:text="${ArticleVo.summary}">Aspernatur at enim excepturi facere in reiciendis</p>
					  </div>
					</div>
				</div>
			</div>
		</section>
    <main role="main">
<section class="wt-section">
    <div class="container">
        <div class="row justify-content-between">
            <div class="col-lg-8">
                <div class="blog-post">
                    <a href="#"><img class="rounded mb-lg-4 mb-3" th:src="@{/assets/img/blog/img1.jpg}" alt="card image"></a>
                    <div class="meta font-lora mb-3">
                        <a href="#" th:text="${ArticleVo.type}" >Front-end</a>
                        <a href="#" th:text="${ArticleVo.createDate}">29th August 2019</a>
                        <!--隐藏域接收一下articleBody-->
                        <input type="hidden" id="hidden" th:value="${ArticleBody}">
                        <input type="hidden" id="hidden2" th:value="${Tags}">
                    </div>
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius eligendi fugiat labore libero molestias provident quae </p>

                </div>
               <h6 id="tag" class="mb-0">Tags:
                        <a href="#" class="badge badge-pill badge-dark">xxxxxxx</a>
                        <a href="#" class="badge badge-pill badge-dark">xxxxxxx</a>
                        <a href="#" class="badge badge-pill badge-dark">xxxxxxx</a>
                        <a href="#" class="badge badge-pill badge-dark">xxxxxxx</a>
                    </h6>

					<section class="wt-section mb-0 pb-0">
					  <!--comments area start-->
                <div class="comments mb-lg-5 mb-4">
                    <h2 class="comments-title mb-lg-5 mb-4"> 财产 信息</h2>
                    <div class="media">
					  <img th:src="@{/assets/img/ava/img3.jpg}" class="wt-box-shadow-lg img-fluid img-thumbnail rounded-circle mr-3" alt="...">
					  <div class="media-body">
						<h6 class="mt-0">财产 位置</h6> <span th:text="${ArticleVo.locate}">September 2, 2018 at 12:17 pm</span>
						<p class="text-muted" th:text="${ArticleVo.preciseLocation}">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>

						<div class="media mt-5">
						  <a class="mr-3" href="#">
							<img th:src="@{/assets/img/ava/img2.jpg}" class="wt-box-shadow-lg img-fluid img-thumbnail rounded-circle mr-3" alt="...">
						  </a>
						  <div class="media-body">
							<h6 class="mt-0">联系 方式</h6>
							<p class="text-muted" th:text="${ArticleVo.contact}">Cras sit amet nibh libero, in gravida vel metus scelerisque ante sollicitudin.</p>
						  </div>
                            <div class="media-body">
                                <h6 class="mt-0">财产 类型</h6>
                                <p class="text-muted" th:text="${ArticleVo.financialType}">Cras sit amet nibh libero, in gravida vel metus scelerisque ante sollicitudin.</p>
                            </div>
                            <div class="media-body">
                                <h6 class="mt-0">财产 面积</h6>
                                <p class="text-muted" th:text="${ArticleVo.area}">Cras sit amet nibh libero, in gravida vel metus scelerisque ante sollicitudin.</p>
                            </div>
						</div>
					  </div>
					</div>
                </div>
				<div class="comment-respond mb-lg-5 mb-4">
                    <h3 class="comment-reply-title mb-lg-5 mb-4">
                        联系 我们
                    </h3>
                    <form role="form" class="comment-form">
                        <div class="row">
                            <div class=" col-md-4">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Name*" required="">
                                </div>
                            </div>
                            <div class=" col-md-4">
                                <div class="form-group ">
                                    <input type="email" class="form-control" placeholder="Email*" required="">
                                </div>
                            </div>
                            <div class=" col-md-4">
                                <div class="form-group ">
                                    <input type="text" class="form-control" placeholder="Website" required="">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="controls">
                                <textarea id="message" rows="5" placeholder="Comments*" class="form-control" required=""></textarea>
                            </div>
                        </div>
                        <p class="text-muted">Your email address will not be published. Required fields are marked *</p>
                        <div class="text-center mt-md-5">
                            <button type="submit" class="btn btn-pill btn-primary">Send</button>
                        </div>
                    </form>
                </div>
				</section>

            </div>
            <div class="col-lg-4">
                <div class="blog-widget mb-4">
                    <form>
                        <div class="form-group">
                            <div class="icon-field">
                                <i class="vl-search"></i>
                                <input type="text" class="form-control" placeholder="Search">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="blog-widget mb-4">
                    <h6 class="mb-4">Categories</h6>
                    <div class="list-group list-group-right-arrow">
                        <a href="#" class="list-group-item bg-light">车</a>
                        <a href="#" class="list-group-item bg-light">房子</a>
                        <a href="#" class="list-group-item bg-light">土地</a>
                        <a href="#" class="list-group-item bg-light">世界</a>
                        <a href="#" class="list-group-item bg-light">车子</a>
                    </div>
                </div>
                <div class="blog-widget mb-4">
                    <h6 class="mb-4" >最新发布的文章</h6>
                    <div class="card border-0 bg-light mb-1">
                        <div class="card-body row align-items-center">
                            <div class="col-4">
                                <a style="cursor:pointer"><img class="card-img" th:src="@{/assets/img/blog/post1.jpg}" alt=""></a>
                                <h5 style="display:none"></h5>
                            </div>
                            <div  class="col-8">
                                <h6 class="my-2 font-size-14"><a href="#">Best UI Design Tip and Tricks</a></h6>
                                <span class="font-size-14 text-muted">12 April 2019</span>
                            </div>
                        </div>
                    </div>
                    <div class="card border-0 bg-light mb-1">
                        <div class="card-body row align-items-center">
                            <div class="col-4">
                                <a style="cursor:pointer"><img class="card-img" th:src="@{/assets/img/blog/post2.jpg}" alt=""></a>
                                <h5 style="display:none"></h5>
                            </div>
                            <div class="col-8">
                                <h6 class="my-2 font-size-14"><a href="#">Latest JavaScript Frameworks</a></h6>
                                <span class="font-size-14 text-muted">14 May 2019</span>
                            </div>
                        </div>
                    </div>
                    <div class="card border-0 bg-light mb-1">
                        <div class="card-body row align-items-center">
                            <div class="col-4">
                                <a style="cursor:pointer"><img class="card-img" th:src="@{/assets/img/blog/post3.jpg}" alt=""></a>
                                <h5 style="display:none"></h5>
                            </div>
                            <div class="col-8">
                                <h6 class="my-2 font-size-14"><a href="#">Free Fonts to use in UX</a></h6>
                                <span class="font-size-14 text-muted">22 April 2019</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
    </main>


    <!-- Footer -->
<footer class="wt-section bg-dark main-footer">
<div class="container">
<div class="row">
<div class=" col-sm-4 col-md col-sm-4 col-12 col mb-4">
<h5 class="mb-4">Reach us</h5>

<p><i class="fa fa-location-arrow mr-2"></i> #123, Manhatt 7 Avenu, NYC </p>
<p><i class="fa fa-phone mr-2"></i>  +1-1234-567-987  </p>
<p><i class="fa fa fa-envelope mr-2"></i> info@yourdomain.com  </p>


</div>


<div class="col-sm-4 col-md  col-6 col mb-4">
<h5 class="mb-4">Site links</h5>

<ul class="list-inline">
<li class="list-block-item mx-2"><a href="#">Home</a></li>
<li class="list-block-item mx-2"><a href="#">About Us</a></li>
<li class="list-block-item mx-2"><a href="#">Services</a></li>
<li class="list-block-item mx-2"><a href="#">Portfolio</a></li>
<li class="list-block-item mx-2"><a href="#">Pricing</a></li>
</ul>

</div>


<div class="col-sm-4 col-md  col-6 col mb-4">
<h5 class="mb-4">Quick links</h5>

<ul class="list-inline">
<li class="list-block-item mx-2"><a href="#">Blog</a></li>
<li class="list-block-item mx-2"><a href="#">Contact Us</a></li>
<li class="list-block-item mx-2"><a href="#">Privacy Policy</a></li>
<li class="list-block-item mx-2"><a href="http://webthemez.com">Terms & Conditions</a></li>
</ul>

</div>


<div class="col-sm-4 col-md  col-12 col mb-4">
<h5 class="mb-4">Follow us</h5>
<ul class="social_footer_ul list-inline text-left mb-0">
<li class="list-inline-item mx-2"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item mx-2"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item mx-2"><a href="#"><i class="fab fa-linkedin"></i></a></li>
<li class="list-inline-item mx-2"><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12 pt-4">

<p class="text-center copyrights"><a class="text-white" href="https://webthemez.com/free-bootstrap-templates/">Bootstrap Theme</a> by WebThemez. <br>© All Rights Reserved</p>
</div>
</div>
</div>
</footer>
    <!-- End Footer -->

    <!-- JS Script Files -->
    <!-- Global Vendor -->
    <script th:src="@{/assets/vendors/jquery.min.js}"></script>
    <script th:src="@{/assets/vendors/jquery.migrate.min.js}"></script>
    <script th:src="@{/assets/vendors/popper.min.js}"></script>
    <script th:src="@{/assets/vendors/bootstrap/js/bootstrap.min.js}"></script>
	<script th:src="@{/assets/vendors/aos/aos.js}"></script>

    <!-- Components Vendor  -->
    <script th:src="@{/assets/vendors/slick-carousel/slick.min.js}"></script>
	   <script th:src="@{/assets/vendors/ace-responsive-menu/ace-responsive-menu.js}"></script>

    <!--Plugin Initialize-->
    <script th:src="@{/assets/js/global.js}"></script>
    <script th:src="@{/assets/vendors/carousel.js}"></script>

   <!--文章刷新代码-->
    <script>
        // let url=window.location.href;
        // console.log(url);
        // let p=url.split('?')[1];
        // let params=new URLSearchParams(p);
        // var articleId=params.get('id');
        // console.log(articleId);
        // var blog_title=document.getElementsByClassName("display-sm-4 display-lg-3");
        //
        //page页数，offset开始位置，limit查询个数
        var pageTableRequest={"page":1, "limit":4, "offset":0};
        var articleQueryDto={"type":""};
        //用来接收文章
        var articles={};
        //获取文章的函数
        function getArticleList(callback) {

            myajax=$.ajax({
                url: "/main/blog/list",
                dataType:'json',
                //data: {"pageTableRequest":JSON.stringify(pageTableRequest)},
                data:JSON.stringify({"pageTableRequest":pageTableRequest,"articleQueryDto":articleQueryDto}),
                type:'post',
                contentType:"application/json",
                success:function(result){
                    articles=result;
                    console.log(articles);
                    status=true;
                }
            })
        }
        //点击进入点击的文章
        //传入内容返回articleid
        function redirectArticle(articleId,callback) {
            location.href = "/main/blog-single-post?id="+articleId;
        }
        //传入内容返回database
        function redirectDataBase(callback) {
            location.href = "/main/blog";
        }
        //刷新网页的文章
        function refreshArticle(){
            // myajax 请求完毕时执行
            $.when(myajax).done(function(){
                //最新页面
                var blog_latest=document.getElementsByClassName("card-body row align-items-center");
                //最新的文章
                for(let i=0;i<blog_latest.length;i++){
                    //标题
                    blog_latest[i].getElementsByTagName("div")[1].getElementsByTagName("h6")[0].innerText=articles.data[i].title;
                    //时间
                    blog_latest[i].getElementsByTagName("div")[1].getElementsByTagName("span")[0].innerText=articles.data[i].createDate;
                    //隐藏的文章id
                    blog_latest[i].getElementsByTagName("div")[0].getElementsByTagName("h5")[0].innerText=articles.data[i].id;
                }
                //添加最新发布文章的跳转页面
                let articleId="";
                for(let i=0;i<blog_latest.length;i++){
                    blog_latest[i].getElementsByTagName("a")[0].addEventListener("click",function (){
                        articleId=blog_latest[i].getElementsByClassName("col-4")[0].getElementsByTagName("h5")[0].innerText;
                        redirectArticle(articleId);
                    })
                }
                //添加类型的文章跳转页面
                let group=document.getElementsByClassName("list-group list-group-right-arrow")[0].getElementsByTagName("a");
                //这里注意了，后端的type对应的是数字，把对应的数字传进去
                for(let i=0;i<group.length;i++) {
                  group[i].addEventListener('click',redirectDataBase);
                }

            })}

        getArticleList();
        refreshArticle();


        //分段文章的代码
        //文章
        var article= document.getElementById("hidden").value.split("contentHtml=")[1];
        //标签数据
        var tags = document.getElementById("hidden2").value.split(",");
        var summary=document.getElementsByClassName("sub-text")[0].innerText;
        var articleHtml=document.getElementsByClassName("blog-post");
        articleHtml[0].getElementsByTagName("p")[0].innerText=summary;
        articleList=article.split("<p>");
        var tag;
        var tagHtml=document.getElementById("tag")

        for (let i = 1; i < articleList.length; i++) {
            let articleText="  "+articleList[i].substring(14);
            articleText=articleText.substring(0,articleText.length-4);
            //最后一段多了点东西
            if (i===articleList.length-1){
                articleText=articleText.substring(0,articleText.length-17);
            }
            let tag=document.createElement('p');
            tag.style.textIndent="2"
            tag.innerText=articleText;
            articleHtml[0].getElementsByTagName("p")[0].parentNode.appendChild(tag);
        }
        //渲染tag
        tagHtml=tagHtml.getElementsByTagName("a");
        for (let i = 0; i < tags.length; i++) {
            tagHtml[i].innerText=tags[i];
        }


    </script>


    <!-- END JAVASCRIPTS -->
  </body>
</html>
